<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熔断器测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 600px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px; }
        label { display: block; margin-bottom: 8px; }
        input[type="number"], button { padding: 10px; margin-bottom: 15px; border-radius: 4px; border: 1px solid #ddd; }
        button { background-color: #007bff; color: white; cursor: pointer; }
        button:hover { background-color: #0056b3; }
        #responseArea { margin-top: 20px; padding: 15px; border: 1px solid #eee; background-color: #f9f9f9; min-height: 50px; white-space: pre-wrap; word-wrap: break-word; }
        .loading { color: #888; }
        .error { color: red; }
    </style>
</head>
<body>
    <div class="container">
        <h1>熔断器测试</h1>
        
        <div>
            <label for="callCount">调用次数:</label>
            <input type="number" id="callCount" value="1" min="1">
        </div>
        
        <button id="testButton">发起测试调用</button>
        
        <h2>响应结果:</h2>
        <div id="responseArea">请点击按钮开始测试...</div>
    </div>

    <script>
        document.getElementById('testButton').addEventListener('click', function() {
            const count = document.getElementById('callCount').value || 1;
            const responseArea = document.getElementById('responseArea');
            
            responseArea.textContent = '正在调用，请稍候...';
            responseArea.className = 'loading';

            // 构建请求URL，调用网关上的测试端点
            // 这个测试端点会再通过网关调用 huodongbaoming-service
            const testUrl = `http://localhost:8087/test-activity-cb?count=${count}`;
            console.log(`[Test Page] 发起测试调用: ${testUrl}`); // 新增日志

            fetch(testUrl)
                .then(response => {
                    console.log('[Test Page] 收到原始响应:', response); // 新增日志
                    // 尝试解析为JSON，如果失败则作为文本处理
                    return response.text().then(text => {
                        try {
                            const data = JSON.parse(text);
                            console.log('[Test Page] 解析后响应 (JSON):', data); // 新增日志
                            return { status: response.status, ok: response.ok, body: data };
                        } catch (e) {
                            console.log('[Test Page] 解析后响应 (Text):', text); // 新增日志
                            return { status: response.status, ok: response.ok, body: text };
                        }
                    });
                })
                .then(result => {
                    responseArea.className = result.ok ? '' : 'error';
                    if (typeof result.body === 'object') {
                        responseArea.textContent = `状态码: ${result.status}\n\n响应体 (JSON):\n${JSON.stringify(result.body, null, 2)}`;
                    } else {
                        responseArea.textContent = `状态码: ${result.status}\n\n响应体 (Text):\n${result.body}`;
                    }
                })
                .catch(error => {
                    console.error('[Test Page] 调用失败:', error); // 修改日志前缀
                    responseArea.textContent = '调用失败: ' + error.message;
                    responseArea.className = 'error';
                });
        });
    </script>
</body>
</html>
